<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
		<div id="app" style="overflow: hidden;">
			<div style="margin-top: 60px;margin-left:80px;border: 0px solid red;" >
					<el-form :model="searchRuleForm" ref="searchRuleForm" label-width="100px" class="demo-ruleForm">
						<el-form-item prop="rentid" label="出租单号：" style="margin-left: -15px;">
							<el-input v-model="searchRuleForm.rentid" placeholder="请输入出租单号" style="width: 230px;float: left"></el-input>
							<el-button type="primary" icon="el-icon-search" style="float: left;position: relative;left: 20px;" @click="submitForm()">搜索</el-button>
							<el-button type="warning" icon="el-icon-refresh-right" style="position: relative;left: 22px;" @click="resetForm('searchRuleForm')">重置</el-button>
						</el-form-item>
					</el-form>
			</div>
			
			<div style="width: 500px;margin: auto;" v-if="visible">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				  <el-form-item label="检查单信息">
				  </el-form-item>
				  <el-form-item label="检查单号">
				    <el-input v-model="ruleForm.checkid" readOnly></el-input>
				  </el-form-item>
				  <el-form-item label="出租单号">
				    <el-input v-model="ruleForm.rentid" readOnly></el-input>
				  </el-form-item>
				  <el-form-item label="客户名称">
				    <el-input v-model="ruleForm.opername" readOnly></el-input>
				  </el-form-item>
				  <el-form-item label="检查时间">
				    <el-input v-model="ruleForm.checkdate" readOnly></el-input>
				  </el-form-item>
				  <el-form-item label="存在问题" prop="problem">
				    <el-input v-model="ruleForm.problem"></el-input>
				  </el-form-item>
				  <el-form-item label="赔付金额" prop="paymoney">
				    <el-input v-model.number="ruleForm.paymoney"></el-input>
				  </el-form-item>
				  <el-form-item label="问题描述" prop="checkdesc">
				    <el-input v-model="ruleForm.checkdesc"></el-input>
				  </el-form-item>
				  <el-form-item>
				    <el-button type="primary" @click="addForm('ruleForm')">立即提交</el-button>
				    <el-button @click="resetForm('ruleForm')">重置</el-button>
				  </el-form-item>
				</el-form>
			</div>
			
			<div style="width: 400px;float: left;" v-if="visible">
				<el-form label-width="100px" class="demo-ruleForm">
				  <el-form-item label="车辆信息">
				  </el-form-item>
				  <el-form-item label="车牌号">
				    <el-input v-model="car.carnumber" readOnly></el-input>
				  </el-form-item>
				  <el-form-item label="车辆类型">
				    <el-input v-model="car.cartype" readOnly></el-input>
				  </el-form-item>
				  <el-form-item label="车辆颜色">
				    <el-input v-model="car.color" readOnly></el-input>
				  </el-form-item>
			  	  <el-form-item label="购买价格">
				    <el-input v-model="car.price" readOnly></el-input>
				  </el-form-item>
				  <el-form-item label="出租价格">
				    <el-input v-model="car.rentprice" readOnly></el-input>
				  </el-form-item>
				  <el-form-item label="出租押金">
				    <el-input v-model="car.deposit" readOnly></el-input>
				  </el-form-item>
				  <el-form-item label="车辆描述">
				    <el-input v-model="car.description" readOnly></el-input>
				  </el-form-item>
				  <el-form-item label="车辆图片">
				  	<img :src="car.carimg" alt height="200">
				   </el-form-item>
				</el-form>
			</div>
			
			<div style="width: 400px;float: left;" v-if="visible">
				<el-form label-width="100px" class="demo-ruleForm">
				  <el-form-item label="出租单信息">
				  </el-form-item>
				  <el-form-item label="出租单号">
				    <el-input v-model="rent.rentid" readOnly></el-input>
				  </el-form-item>
				  <el-form-item label="出租价格">
				    <el-input v-model="rent.price" readOnly></el-input>
				  </el-form-item>
				  <el-form-item label="起租时间">
				    <el-input v-model="rent.begindate" readOnly></el-input>
				  </el-form-item>
			  	  <el-form-item label="还车时间">
				    <el-input v-model="rent.returndate" readOnly></el-input>
				  </el-form-item>
				</el-form>
			</div>
			
			<div style="width: 400px;float: left;" v-if="visible">
				<el-form label-width="100px" class="demo-ruleForm">
				  <el-form-item label="客户信息">
				  </el-form-item>
				  <el-form-item label="身份证号">
				    <el-input v-model="customer.identity" readOnly></el-input>
				  </el-form-item>
				  <el-form-item label="客户姓名">
				    <el-input v-model="customer.custname" readOnly></el-input>
				  </el-form-item>
				  <el-form-item label="客户性别">
				    <el-input v-model="customer.sex" readOnly></el-input>
				  </el-form-item>
			  	  <el-form-item label="客户地址">
				    <el-input v-model="customer.address" readOnly></el-input>
				  </el-form-item>
				  <el-form-item label="客户电话">
				    <el-input v-model="customer.phone" readOnly></el-input>
				  </el-form-item>
				  <el-form-item label="客户职位">
				    <el-input v-model="customer.career" readOnly></el-input>
				  </el-form-item>
				</el-form>
			</div>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script src="js/elementui.js"></script>
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script>
	  new Vue({
		el: '#app',
		data() {
			return {
				searchRuleForm: {
				  rentid:''
				},
				ruleForm: {
				  checkid:'',
				  rentid:'',
				  custname:'',
				  problem:'',
				  paymoney:'',
				  checkdate:'',
				  checkdesc:''
				},
				car:{
					carnumber:'',
					cartype:'',
					color:'',
					price:'',
					rentprice:'',
					deposit:'',
					description:'',
					carimg:'',
				},
				rent:{
					rentid:'',
					price:'',
					begindate:'',
					returndate:''
				},
				customer:{
					identity:'',
					custname:'',
					sex:'',
					address:'',
					phone:'',
					career:''
				},
				rules: {
				  paymoney: [{required: true, message: '请输入赔付金额', trigger: 'blur'},{type: 'number', message: '赔付金额必须为数字值'}],
				  problem: [{required: true, message: '请输入存在问题', trigger: 'blur'}],
				  checkdesc: [{required: true, message: '请输入问题描述', trigger: 'blur'}]
				},
				visible:false
			}
		},
		methods:{
			resetForm(formName) {
			  this.$refs[formName].resetFields();
			},
			submitForm() {
				const _this = this
				axios.get('http://localhost:8181/check/init?rentid='+_this.searchRuleForm.rentid).then(function (resp) {
					if(resp.data.code == -1){
						_this.$alert(resp.data.msg, '提示', {
							confirmButtonText: '确定'
						});
					} else {
						_this.visible = true
						_this.car = resp.data.car
						_this.rent = resp.data.rent
						_this.customer = resp.data.customer
						if(_this.customer.sex == 0) {
							_this.customer.sex = '女'
						} else {
							_this.customer.sex = '男'
						}
						_this.ruleForm = resp.data.check
					}
				})
			},
			addForm(formName) {
				this.$refs[formName].validate((valid) => {
				  if (valid) {
					let _this = this
					axios.post('http://localhost:8181/check/add',_this.ruleForm).then(function (response) {
						if(response.data.code == 0){
							_this.$alert(response.data.msg, '提示', {
								confirmButtonText: '确定',
								callback: action => {
									location.reload()
								}
							});
						} else {
							_this.$alert(response.data.msg, '提示', {
								confirmButtonText: '确定'
							});
						}
					})
				  } else {
					console.log('error submit!!');
					return false;
				  }
				});
			  }
		}
	  })
	</script>
		
	<style>
	    .home_container {
	        height: 100%;
	        position: absolute;
	        top: 0px;
	        left: 0px;
	        width: 100%;
	    }
	
	    .el-header {
	        background-color: #20a0ff;
	        color: #333;
	        text-align: center;
	        display: flex;
	        align-items: center;
	        justify-content: space-between;
	    }
	
	    .el-aside {
	        background-color: #ECECEC;
	    }
	
	    .el-main {
	        background-color: #fff;
	        color: #000;
	        text-align: center;
	    }
	
	    .el-footer {
	        background-color: #ea7e53;
	        color: #fff;
	        font-size: 22px;
	        line-height: 60px;
			text-align: center;
	    }
	
	    .home_title {
	        color: #fff;
	        font-size: 22px;
	        display: inline;
	    }
	
	    .home_userinfo {
	        color: #fff;
	        cursor: pointer;
	    }
	
	    .home_userinfoContainer {
	        display: inline;
	        margin-right: 20px;
	    }
	</style>
</html>
